<!--  -->
<template>
  <div class="" v-if="goodsDetail">
    <div class="cont">
      <div class="left">
        <p class="title">{{ goodsDetail.title }}</p>
        <p class="price">{{ $t("公共.货币符号") }}{{ goodsDetail.price }}</p>
        <div class="type">
          <p class="font24">{{ t("选择型号") }}</p>
          <div class="choice">
            <el-select
              v-model="value"
              :placeholder="t('请选择')"
              value-key="id"
              @change="select_change($event, 0)"
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="value2"
              :placeholder="t('请选择')"
              value-key="id"
              @change="select_change($event, 1)"
            >
              <el-option
                v-for="item in value.children"
                :key="item.id"
                :label="item.name"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="style">
          <p class="font24">{{ t("选择款式") }}</p>
          <p
            style="
              font-weight: 400;
              font-size: 20px;
              color: #222222;
              margin-top: 15px;
            "
          >
            {{ goodsDetail.spu[0].item[skuSelect].name }}
          </p>
          <ul>
            <li
              :active="index == skuSelect"
              v-for="(item, index) in goodsDetail.spu[0].item"
              :key="item.id"
              @click="skuClick(item, index)"
            >
              <img class="style-cover" :src="item.thumbnail | imgSrc" alt="" />
            </li>
          </ul>
        </div>
        <div class="color">
          <span class="font24" style="margin-right: 20px">{{
            t("选择颜色")
          }}</span>
          <!-- <span class="font20 fw400">{{ goodsDetail.spu[1].item[colorSelect].name }}</span> -->
          <ul>
            <li
              class="color-area"
              v-for="(obj, index) in goodsDetail.spu[1].item"
              :key="index"
              :active="index == colorSelect"
              @click="colorClick(obj, index)"
            >
              <!-- {{ obj.name }} -->
              <img
                class="color-img"
                :src="obj.color | imgSrc"
                alt=""
                srcset=""
              />
            </li>
          </ul>
        </div>
        <div class="design">
          <p class="font24 ptb10">{{ t("立即设计") }}</p>
          <div class="select">
            <div>
              <p class="font18 fw400">{{ t("姓名") }}</p>
              <input
                class="editor"
                :maxlength="maxlength"
                v-model="editorName"
                @input="inputChange"
              />
              <p class="num">
                (<span>{{ editorName.length }}</span
                >/{{ maxlength }})字数
              </p>
            </div>
            <div>
              <ul>
                <li v-for="(item, index) in design_words" :key="index">
                  <img :src="item.img" @click="onClick(item, 'word')" />
                </li>
              </ul>
            </div>
            <div v-if="design_form.design_image.length > 0">
              <p class="font18 fw400">{{ t("图案") }}</p>
              <ul>
                <li
                  v-for="(item, index) in design_form.design_image"
                  :key="index"
                  :select="index == design_form_select.design_image_select"
                >
                  <img
                    class="li-img"
                    :src="
                      (item.thumbnail + `?${new Date().getTime()}`) | imgSrc
                    "
                    alt=""
                    @click="onClick(item, 'bg', index)"
                    crossorigin="anonymous"
                  />
                </li>
              </ul>
            </div>
            <div
              v-if="
                design_form.design_image.length > 0 &&
                design_form.design_image[design_form_select.design_image_select]
                  .children.length > 0
              "
            >
              <p class="font18 fw400">{{ t("设计") }}</p>
              <ul>
                <li
                  v-for="(item, index) in design_form.design_image[
                    design_form_select.design_image_select
                  ].children"
                  :key="index"
                  :select="index == design_form_select.design_model_select"
                >
                  <img
                    class="li-img"
                    :src="
                      (item.thumbnail + `?${new Date().getTime()}`) | imgSrc
                    "
                    alt=""
                    @click="onClick(item, 'mode', index)"
                    crossorigin="anonymous"
                  />
                </li>
              </ul>
            </div>
            <div v-if="design_pages.length > 0">
              <p class="font18 fw400">{{ t("版面") }}</p>
              <ul>
                <li
                  v-for="(item, index) in design_pages"
                  :key="index"
                  :select="index == design_form_select.design_page_select"
                >
                  <img
                    class="li-img"
                    :src="item.icon"
                    alt=""
                    crossorigin="anonymous"
                    @click="onClick(item, 'page', index)"
                  />
                </li>
              </ul>
            </div>
            <!-- <div>
                            <p class="font18 fw400">字体</p>
                            <ul>
                                <li v-for="(item, index) in design_form.fonts" :key="index">
                                    <img :src="item.icon" alt="">
                                </li>
                            </ul>
                        </div> -->
            <div v-if="design_form.design_font_color.length > 0">
              <p class="font18 fw400">{{ t("字体颜色") }}</p>
              <ul class="fontcolor">
                <li
                  v-for="(item, index) in design_form.design_font_color"
                  :key="index"
                  :select="index == design_form_select.design_font_color_select"
                  @click="onClick(item, 'color', index)"
                >
                  <span
                    class="design-color"
                    :style="{ 'background-color': item.font_color }"
                  ></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="shopping">
          <button @click="addcar">{{ t("下单") }}</button>
          <div class="pay">
            <ul>
              <li>
                <img src="../../assets/images/home/wx.png" alt="" />
              </li>
              <li>
                <img src="../../assets/images/home/pp.png" alt="" />
              </li>
              <li>
                <img src="../../assets/images/home/yhk.png" alt="" />
              </li>
            </ul>
            <p>{{ t("支付的付款方式") }}</p>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="show" v-loading="make_loading">
          <canvas id="canvas" class="canvas" ref="canvas"></canvas>
          <img
            id="phoneBG"
            :src="goodsDetail.goods_model_res.image | imgSrc"
            @load="bg_loaded()"
          />
          <img class="showImg" :src="phoneBg" alt="" />
          <div class="encoding">
            <img :src="skuObj.sn_qr" alt="" />
            <p style="text-align: center; margin-top: 10px">
              {{ skuObj.sn }}
            </p>
          </div>
        </div>
        <div class="swiper">
          <div>
            <ul v-if="skuObj">
              <li
                v-for="(item, index) in skuObj.images"
                :key="index"
                @click="show_image_click(item, index)"
              >
                <template v-if="index == 0">
                  <img :src="item" alt="" />
                </template>
                <template v-else>
                  <img :src="item | imgSrc" alt="" />
                </template>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="details" v-html="goodsDetail.content"></div>
    <div class="leftnav">
      <img src="../../assets/images/home/service.png" alt="" />
      <router-link
        tag="img"
        :src="require('../../assets/images/home/car.png')"
        to="shoppingCart"
      ></router-link>
    </div>
    <div class="addpop">
      <el-dialog
        :title="t('选择地址')"
        :visible.sync="addressDialog"
        width="70%"
      >
        <addressEidt @editAddress="addAddress($event)"></addressEidt>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getGoodsDetail,
  getGoodsSku,
  getGoodsModelList,
  getWorksList,
  orderCreate,
  upImage,
  addressAdd,
  addressDetail,
  imgTobase,
} from "@/utils/api";
import addressEidt from "@/components/addressEidt.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    addressEidt,
  },
  data() {
    //这里存放数据
    return {
      goodsDetail: null,
      skuObj: null,
      typeList: [],
      value: null,
      value2: null,
      skuSelect: 0,
      colorSelect: 0,
      maxlength: 3,
      editorName: "",
      design_pages: [
        {
          icon: require("@/assets/images/home/design/page_icon_1.png"),
          pos: "VerticalCenter",
        },
        {
          icon: require("@/assets/images/home/design/page_icon_2.png"),
          pos: "HorizontalCenter",
        },
        {
          icon: require("@/assets/images/home/design/page_icon_3.png"),
          pos: "VerticalLeft",
        },
      ],
      design_words: [
        {
          img: require("@/assets/images/home/heart.png"),
          txt: "", //未识别文字,勿删
        },
        {
          img: require("@/assets/images/home/star.png"),
          txt: "", //未识别文字,勿删
        },
        {
          img: require("@/assets/images/home/flower.png"),
          txt: "", //未识别文字,勿删
        },
      ],
      design_form: [],
      // design_form: {
      //     words: [
      //         {
      //             img: require("@/assets/images/home/heart.png"),
      //             txt: '' //未识别文字,勿删
      //         },
      //         {
      //             img: require("@/assets/images/home/star.png"),
      //             txt: '' //未识别文字,勿删
      //         },
      //         {
      //             img: require("@/assets/images/home/flower.png"),
      //             txt: '' //未识别文字,勿删
      //         },
      //     ],
      //     bgs: [
      //         {
      //             icon: require("@/assets/images/home/design/bg_icon_1.png"),
      //             modes: [
      //                 {
      //                     icon: require("@/assets/images/home/design/bg_icon_1.png"),
      //                     img: require("@/assets/images/home/design/bg_1_1.png"),
      //                 },
      //                 {
      //                     icon: require("@/assets/images/home/design/bg_icon_1.png"),
      //                     img: require("@/assets/images/home/design/bg_1_2.png"),
      //                 }
      //             ],
      //             mode_idx: -1
      //         },
      //         {
      //             icon: require("@/assets/images/home/design/bg_icon_2.png"),
      //             modes: [
      //                 {
      //                     icon: require("@/assets/images/home/design/bg_icon_2.png"),
      //                     img: require("@/assets/images/home/design/bg_2_1.png"),
      //                 },
      //                 {
      //                     icon: require("@/assets/images/home/design/bg_icon_2.png"),
      //                     img: require("@/assets/images/home/design/bg_2_2.png"),
      //                 }
      //             ],
      //             mode_idx: -1
      //         },
      //     ],
      //     bg_idx: 0,
      //     fonts: [
      //         {
      //             icon: require("@/assets/images/home/tu-1.png")
      //         },
      //         {
      //             icon: require("@/assets/images/home/tu-1.png")
      //         },
      //         {
      //             icon: require("@/assets/images/home/tu-1.png")
      //         },
      //     ],
      //     font_idx: -1,
      //     colors: [
      //         {
      //             color: '#222222'
      //         },
      //         {
      //             color: '#389AFF'
      //         },
      //         {
      //             color: '#BB7474'
      //         },
      //         {
      //             color: '#ffffff'
      //         },
      //         {
      //             color: '#FC3939'
      //         },
      //         {
      //             color: '#FF7038'
      //         },
      //     ],
      //     color_idx: 4
      // },
      design_form_select: {
        design_font_select: 0,
        design_font_color_select: 0,
        design_image_select: 0,
        design_model_select: 0,
        design_page_select: 0,
      },
      ctx: null,
      phoneBg: require("@/assets/images/home/design/phone_bg.png"),
      // phoneBg: null,
      originBg: require("@/assets/images/home/design/phone_bg.png"),
      canvasSize: {
        w: "451",
        h: "895",
        camera_w: "240",
        camera_h: "247",
      },
      make_loading: false,
      address: null,
      addressDialog: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    /**
     * 简化翻译方法(少写property)
     * @param {String} v 最后一个key值
     */
    t(v) {
      return this.$t(`详情页.${v}`);
    },
    /***
     * 图片合成
     * **/
    // hehcengimg() {
    //   //imgSrc1 背景图片（二维码）链接
    //   //imgSrc2 小图片（头像）链接
    //   // 背景底片
    //   var canvas = document.createElement("canvas");
    //   canvas.width = 400;
    //   canvas.height = 794;
    //   var context = canvas.getContext("2d");

    //   context.rect(0, 0, canvas.width, canvas.height);
    //   context.fillStyle = "#fff";
    //   context.fill();

    //   var myImage = new Image();
    //   myImage.src =
    //     "https://sjkwz.oss-cn-beijing.aliyuncs.com" +
    //     process.env.VUE_APP_IMG_ROOT +
    //     this.goodsDetail.goods_model_res.image; //背景图片  你自己本地的图片或者在线图片
    //   myImage.crossOrigin = "Anonymous";

    //   myImage.onload = () => {
    //     //手机的摄像头
    //     context.drawImage(myImage, 0, 0, 400, 798);
    //     var myImage2 = new Image();
    //     myImage2.src = imgSrc2; //你自己本地的图片或者在线图片
    //     myImage2.crossOrigin = "Anonymous";
    //     myImage2.onload = () => {
    //       // 设置填充的颜色
    //       context.fillStyle = "white";
    //       // 绘制填充的矩形
    //       context.fillRect(250, 250, 210, 210);
    //       context.drawImage(myImage2, 260, 260, 190, 190);
    //       var base64 = canvas.toDataURL("image/png"); //"image/png" 这里注意一下
    //       // 获取图片容器
    //       var myImg = document.getElementById("myImg");
    //       myImg.src = base64;
    //     };
    //   };
    // },
    addAddress(e) {
      addressAdd({
        ...e,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.addressDialog = false;
          this.address = { ...e, id: res.data };
        }
      });
    },
    async addcar() {
      //判断地址
      if (!this.address) {
        this.addressDialog = true;
        return;
      }
      //上传图片
      let imgBlobBuffer = this.$util.base64ToBlob(this.skuObj.images[0]);
      let upRes = await upImage(imgBlobBuffer);

      if (upRes.data.code == 1) {
        //下单
        let createOrderRes = await orderCreate({
          goods: [
            {
              sku_id: this.skuObj.id,
              number: 1,
              goods_id: this.goodsDetail.id,
            },
          ],
          address_id: this.address.id,
          coupon_id: 0,
          works_image: upRes.data.data.url,
        });
        if (createOrderRes.code == 1) {
          this.$message.success(createOrderRes.msg);
          this.$router.push({
            name: "order",
            query: {
              type: 1,
            },
          });
        }
      } else {
        this.$message.error(this.$t("公共.图片上传失败"));
      }
    },
    onClick(item, key, index) {
      console.log(key);
      if (key == "word") {
        if (this.editorName.length + 1 > this.maxlength || this.maxlength < 1)
          return;
        this.editorName = this.editorName + item.txt;
      } else if (key == "bg") {
        this.design_form_select.design_image_select = index;
      } else if (key == "mode") {
        this.design_form_select.design_model_select = index;
      } else if (key == "page") {
        this.design_form_select.design_page_select = index;
      } else if (key == "color") {
        this.design_form_select.design_font_color_select = index;
      }
      this.doCanvas();
    },
    /**
     * 绘制操作分发
     */
    async doCanvas() {
      if (this.make_loading == true) return;
      this.make_loading = true;
      await this.canvasOrginImg(); //底图
      await this.canvasMode(); //绘制图案
      await this.canvasLens(); //镜头
      await this.canvasFrame(); //边框
      this.canvasText(); // 绘制文字

      let el = document.getElementById("canvas");
      if (!el) {
        // console.log("el =>", el);
        this.make_loading = true;
        return;
      }
      // console.log("el size =>", el.clientWidth, el.clientHeight);
      if (el.clientWidth == 0 || el.clientHeight == 0) {
        await this.doCanvas();
        return;
      }
      this.phoneBg = el.toDataURL();
      // console.log("phoneBg =>", this.phoneBg);
      this.skuObj.images[0] = this.phoneBg;
      // console.log("skuObj images =>", this.skuObj.images);
      this.make_loading = false;
    },
    /**
     * 绘制最底层原始图片
     */
    canvasOrginImg() {
      console.log(
        "底片------------------",
        "https://sjkwz.oss-cn-beijing.aliyuncs.com" +
          this.goodsDetail.goods_model_res.image
      );
      console.log("canvasOrginImg......");
      this.ctx.clearRect(0, 0, this.canvasSize.w, this.canvasSize.h);
      return this.canvasImg(
        process.env.VUE_APP_IMG_ROOT + this.goodsDetail.goods_model_res.image
      );
      // return this.canvasImg(this.originBg);
    },
    /**
     * 背景图绘制
     */
    canvasMode() {
      console.log("canvasMode......");
      if (this.design_form_select.design_image_select < 0)
        return Promise.resolve(true); //图片未选择
      let mode =
        this.design_form.design_image[
          this.design_form_select.design_image_select
        ];
      console.log("mode ===> ", mode);
      if (this.design_form_select.design_model_select < 0 || !mode)
        return Promise.resolve(true); //设计未选择
      // return Promise.resolve(true);
      console.log(
        "背景图----",
        "https://sjkwz.oss-cn-beijing.aliyuncs.com" +
          mode.children[this.design_form_select.design_model_select].image
      );
      return this.canvasImg(
        process.env.VUE_APP_IMG_ROOT +
          mode.children[this.design_form_select.design_model_select].image
      );
    },
    /**
     * 绘制边框
     */
    canvasFrame() {
      console.log("canvasFrame......");
      console.log(
        "边框----",
        "https://sjkwz.oss-cn-beijing.aliyuncs.com" + this.skuObj.thumbnail
      );
      if (!this.skuObj) return Promise.resolve(true);
      return this.canvasImg(
        process.env.VUE_APP_IMG_ROOT + this.skuObj.thumbnail
      );
      // return this.canvasImg(require("@/assets/images/home/design/phone_case_1.png"));
    },
    /**
     * 镜头绘制
     */
    canvasLens() {
      console.log(
        "canvasLens......",
        process.env.VUE_APP_IMG_ROOT +
          this.goodsDetail.goods_model_res.photo_image
      );
      return new Promise((resolve) => {
        const camera_image = new Image(
          this.canvasSize.camera_w,
          this.canvasSize.camera_h
        );
        camera_image.crossOrigin = "anonymous";
        camera_image.onload = (_) => {
          this.ctx.drawImage(
            camera_image,
            20,
            20,
            camera_image.width,
            camera_image.height
          );
          resolve(true);
        };
        setTimeout(() => {
          camera_image.src =
            process.env.VUE_APP_IMG_ROOT +
            this.goodsDetail.goods_model_res.photo_image +
            `?${new Date().getTime()}`; //require("@/assets/images/home/design/phone_camera_1.png");
        }, 30);
      });
    },
    /**
     * 根据路径绘制图片(整图)
     * @param {String} src 图片路径
     */
    canvasImg(src) {
      return new Promise(async (resolve) => {
        let suffix = src.split(".")[1];
        let imgRes = await imgTobase({ oss_url: src });
        if (imgRes.code == 1) {
          let base64 = `data:image/${suffix};base64,${imgRes.data}`;
          const full_image = new Image(this.canvasSize.w, this.canvasSize.h);
          full_image.onload = (_) => {
            this.ctx.drawImage(
              full_image,
              0,
              0,
              full_image.width,
              full_image.height
            );
            resolve(true);
          };
          setTimeout(() => {
            full_image.src = base64;
          }, 60);
        }
      });
    },
    /**
     * 文字绘制
     */
    canvasText() {
      if (this.editorName.length > 0) {
        let page =
          this.design_pages[this.design_form_select.design_page_select];
        this.ctx.font = "100px iconfont";
        let colorArr =
          this.design_form.design_font_color[
            this.design_form_select.design_font_color_select
          ].font_color;
        let color = colorArr.split(",");
        console.log("color =>", color[0]);
        this.ctx.fillStyle = color[0].split(" ").join("");
        if (page.pos == "VerticalLeft") {
          this.ctx.translate(this.canvasSize.w - 40, this.canvasSize.h);
          this.ctx.rotate((270 * Math.PI) / 180);
          this.ctx.fillText(this.editorName, 40, 0, this.canvasSize.h);
        } else if (page.pos == "VerticalCenter") {
          this.ctx.translate(this.canvasSize.w / 2, this.canvasSize.h);
          this.ctx.rotate((270 * Math.PI) / 180);
          this.ctx.fillText(
            this.editorName,
            40,
            40,
            this.canvasSize.h - this.canvasSize.camera_h - 80
          );
        } else if (page.pos == "HorizontalCenter") {
          this.ctx.fillText(
            this.editorName,
            40,
            this.canvasSize.h / 2,
            this.canvasSize.w - 80
          );
        }
        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
      }
    },
    /**
     * 背景图加载完成
     */
    bg_loaded() {
      console.log("bg loaded.....", this.ctx);
      this.loadCanvas();
    },
    inputChange() {
      this.doCanvas();
    },
    getGoodsDetail() {
      let { goods_id: x } = this.$route.query;
      getGoodsDetail({
        goods_id: x,
        goods_model_id: this.value2.id,
      }).then(async (res) => {
        if (res.code == 1) {
          let detail_buf = res.data;
          if (detail_buf.content) {
            const imgRegEx = /<img.*?>/gi;
            detail_buf.content = detail_buf.content.replace(
              imgRegEx,
              (match) => {
                return match.replace(/<img/, '<img style="width:100%;"');
              }
            );
          }
          this.goodsDetail = detail_buf;
          //   console.log(this.goodsDetail);
          await this.getGoodsSku();
          this.getWorksList();
        }
      });
    },
    getGoodsSku() {
      return new Promise((resolve) => {
        getGoodsSku({
          goods_id: this.$route.query.goods_id,
          goods_model_id: this.value2.id,
          type_name: this.goodsDetail.spu[0].item[this.skuSelect].name,
          color_name: this.goodsDetail.spu[1].item[this.colorSelect].name,
        }).then((res) => {
          console.log("skuobj => ", res);
          if (res.code == 1) {
            if (res.data) {
              res.data.images.unshift("");
              this.skuObj = res.data;
              resolve(true);
            } else {
              resolve(false);
            }
          }
        });
      });
    },
    getWorksList() {
      getWorksList({
        goods_model_id: this.value2.id,
      }).then(async (res) => {
        if (res.code == 1) {
          console.log("load canvas =>", res);
          this.design_form = res.data;
        }
      });
    },
    async skuClick(item, index) {
      console.log(item);
      const lastIdx = this.skuSelect;
      this.skuSelect = index;
      let result = await this.getGoodsSku();
      console.log("skuClick result ===> ", result);
      if (result) {
        this.doCanvas();
      } else {
        this.skuSelect = lastIdx;
        if (!item.images) {
          this.$message.error(this.t("该款式下无图片"));
          return;
        }
      }
    },
    colorClick(obj, index) {
      this.colorSelect = index;
      this.getGoodsSku();
    },
    async loadCanvas() {
      console.log("load canvas .........");
      await this.$nextTick();
      let canvas = this.$refs.canvas;
      let img = document.getElementById("phoneBG");
      this.canvasSize.w = img.clientWidth;
      this.canvasSize.h = img.clientHeight;
      if (!this.ctx) {
        this.ctx = canvas.getContext("2d");
      }
      canvas.width = this.canvasSize.w;
      canvas.height = this.canvasSize.h;
      this.doCanvas();
      return true;
    },
    show_image_click(item, index) {
      console.log("show_image_click =>", item);
      if (index == 0) {
        this.phoneBg = item;
      } else {
        this.phoneBg = process.env.VUE_APP_IMG_ROOT + item;
      }
    },
    select_change(e, type) {
      console.log(e);
      if (type == 0) {
      } else if (type == 1) {
        this.value2 = e;
        this.getGoodsDetail();
      }
    },
  },
  created() {
    getGoodsModelList({
      goods_id: this.$route.query.goods_id,
    }).then((res) => {
      if (res.code == 1) {
        this.typeList = res.data;
        this.value = this.typeList[0];
        this.value2 = this.value.children[0];
        this.getGoodsDetail();
      }
    });
    //获取默认地址
    addressDetail({ id: 0 }).then((res) => {
      if (res.code == 1) {
        this.address = res.data;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.cont {
  position: relative;
  padding: 30px 105px 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .left {
    flex-basis: 40%;

    .title {
      font-size: 43px;
      color: #222222;
      line-height: 38px;
      font-weight: bold;
    }

    .price {
      font-size: 35px;
      font-weight: bold;
      color: #222222;
      margin: 20px 0px;
    }

    .type {
      .choice {
        margin-top: 10px;
        display: flex;
        gap: 10px;

        .el-input__inner {
          border: 1px solid #303133;
          height: 60px;
          font-size: 20px;
        }

        .el-input__inner:focus {
          border-color: #ff5757;
        }
      }
    }

    .style {
      margin-top: 20px;

      ul {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        flex-flow: row wrap;
        padding-top: 10px;

        li {
          width: 150px;
          border: 1px solid #000000;
          border-radius: 4px;
          margin-right: 10px;
          margin-bottom: 10px;

          .style-cover {
            display: block;
            width: 100%;
            object-fit: contain;
          }

          p {
            width: 100%;
            height: 20%;
            background: #ededed;
            border-radius: 0px 0px 4px 4px;
            text-align: center;
            line-height: 30px;
            font-size: 18px;
            color: #222222;
          }
        }

        li[active] {
          border: 2px solid #ff5757;

          p {
            color: #fff;
            background: #ff5757;
          }
        }
      }
    }

    .color {
      margin-top: 20px;

      ul {
        display: flex;
        margin: 20px 0;

        .color-area {
          font-size: 20px;
          margin-right: 15px;
          cursor: pointer;
          user-select: none;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          box-sizing: border-box;

          .color-img {
            width: 26px;
            height: 26px;
            border-radius: 50%;
          }
        }

        li[active] {
          font-weight: bold;
          border: 1px solid #ff5757;
        }
      }
    }

    .design {
      margin-top: 10px;

      .select {
        width: 450px;
        background: #ffffff;
        border: 1px solid #222222;
        border-radius: 8px;
        padding: 10px 22px;

        div {
          position: relative;
          margin-bottom: 15px;

          .editor {
            font-family: "iconfont";
          }

          input {
            margin-top: 5px;
            width: 100%;
            height: 50px;
            background: #ffffff;
            border: 1px solid #999999;
            border-radius: 2px;
          }

          .num {
            position: absolute;
            top: 50%;
            right: 10px;
            font-size: 16px;
            font-weight: 400;
            color: #666666;
          }

          ul {
            margin-top: 5px;
            display: flex;

            li {
              width: 50px;
              height: 50px;
              background: #ffffff;
              border: 1px solid #666666;
              margin-left: 5px;
              display: flex;
              justify-content: center;
              align-items: center;

              .li-img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                overflow: hidden;
              }
            }

            li[select] {
              border: 1px solid #ff5757;
            }
          }

          .fontcolor {
            li {
              width: 34px;
              height: 34px;
              border-radius: 50%;
              border: 0;
              // box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.23);
              display: flex;
              justify-content: center;
              align-items: center;
              box-sizing: border-box;

              .design-color {
                width: 26px;
                height: 26px;
                border-radius: 50%;
              }
            }

            .active {
              border: 1px solid #ff5757;
            }

            // .active::before {
            //     border: 2px solid #fff;
            //     content: "";
            //     display: block;
            //     pointer-events: none;
            //     width: 85%;
            //     height: 85%;
            //     border-radius: 50%;
            //     pointer-events: none;
            // }
          }
        }
      }
    }

    .shopping {
      width: 450px;
      display: flex;
      justify-content: flex-start;
      flex-direction: column;

      button {
        height: 60px;
        background: #ff5757;
        border-radius: 39px;
        text-align: center;
        line-height: 60px;
        border: 0;
        color: #fff;
        margin: 20px 0 10px;
      }

      .pay {
        display: flex;
        flex-direction: column;

        ul {
          display: flex;
          justify-content: space-around;

          li {
            width: 90px;

            img {
              width: 100%;
            }
          }
        }

        p {
          width: 100%;
          text-align: center;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
    }
  }

  .right {
    flex-basis: 55%;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    .show {
      // top: 100px;
      width: 400px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      position: sticky;

      #canvas {
        position: absolute;
        z-index: 10;
        opacity: 0;
      }

      #phoneBG {
        position: relative;
        width: 100%;
        object-fit: contain;
        z-index: 9;
        opacity: 0;
      }

      .showImg {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 15;
      }

      .encoding {
        position: absolute;
        right: -100px;
        bottom: 20px;

        img {
          width: 60px;
          height: 60px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: #222222;
        }
      }
    }

    .swiper {
      width: 220px;

      div {
        width: 200px;
        height: 913px;
        overflow: auto;

        ul {
          li {
            width: 120px;
            height: 144px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 10px;

            img {
              width: 71px;
              height: 133px;
            }
          }
        }
      }

      div::-webkit-scrollbar {
        width: 6px;
        height: 400px;
        background-color: #eee;
      }

      div::-webkit-scrollbar-thumb {
        background-color: #000;
        border-radius: 10px;
      }
    }
  }
}

.details {
  margin-top: 40px;

  img {
    display: block;
    width: 100%;
  }
}

.leftnav {
  width: 70px;
  height: 160px;
  position: fixed;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);

  img {
    width: 70px;
    height: 70px;
    margin-bottom: 10px;
  }
}

.el-select-dropdown__item.selected {
  color: #ff5757;
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
